<template>
  <div class="course">
    <Header />

    <div class="top_tab">
      <span
        v-for="(t, i) in tabList"
        :key="i"
        :class="[currentTabIndex == i ? 'active' : '']"
        @click="tabClick(t, i)"
        >{{ t.label }}</span
      >
    </div>
    <div class="container">
      <div class="content" id="content">
        <div class="l"><img :src="QNURL + courseDetail.cover" alt="" /></div>
        <div class="r">
          <div class="r_title">{{ courseDetail.name }}</div>
          <div class="name">{{ courseDetail.nickName }}</div>
          <div class="btns">
            <el-button
              type="success"
              v-if="isTeacher && courseDetail.userId == userInfo?.userId"
              @click="
                router.push({
                  path: '/course_visualization',
                  query: {
                    id: courseId
                  }
                })
              "
              >数据统计</el-button
            >
            <el-button
              type="danger"
              v-if="!isTeacher && isSelcted"
              @click="cancelUserCourseFun"
              >从我的课程移除</el-button
            >
            <el-button
              type="primary"
              v-if="!isTeacher && !isSelcted"
              @click="addCourse"
              >添加到我的课程</el-button
            >
          </div>
        </div>
      </div>
      <div class="tab" id="introduce">
        <span
          :class="[currentTabIndex == i ? 'tab_active' : '']"
          v-for="(t, i) in tabList"
          :key="i"
          @click="tabClick(t, i)"
          >{{ t.label }}</span
        >
      </div>
      <div class="introduce">
        <div class="value">{{ courseDetail.courseIntroduce }}</div>
      </div>
      <div class="title" id="course">
        <span>课程</span>
        <span v-if="isTeacher && courseDetail.userId == userInfo?.userId"
          ><el-button type="primary" @click="addVideo"
            >添加视频</el-button
          ></span
        >
      </div>
      <div class="video">
        <div class="item" v-for="(item, index) in videoList" :key="index">
          <div class="l" @click="videoClick(item, index)">
            <span>{{ index + 1 }}.{{ item.name }}</span>
          </div>
          <div class="op">
            <span style="margin-right: 20px" v-if="!isTeacher && isSelcted"
              ><el-tag class="ml-2" :type="scheduleType(item)">
                {{ ((item.studyDuration / item.duration) * 100).toFixed(2) }}%
              </el-tag></span
            >
            <el-button
              link
              type="primary"
              @click="addVideo(false, item)"
              v-if="isTeacher"
              >修改</el-button
            >
            <el-button
              link
              type="danger"
              @click="deleteVideoFun(item)"
              v-if="isTeacher"
              >删除</el-button
            >
          </div>
        </div>
      </div>
      <div class="title" id="liveStreaming">
        <span>直播</span>
        <span
          ><el-button
            type="primary"
            v-if="isTeacher && courseDetail.userId == userInfo?.userId"
            @click="addLiveStreaming"
            >发起直播</el-button
          ></span
        >
      </div>
      <div class="liveStreaming">
        <div
          class="item"
          v-for="(item, index) in liveStreamingList"
          :key="index"
        >
          <div class="l" @click="liveStreamingClick(item, index)">
            <span class="mr10">{{ index + 1 }}.{{ item.roomName }}</span>
            <span style="color: var(--secondary-color)" class="mr10">{{
              item.orderTime
            }}</span>
            <span
              ><el-tag
                class="ml-2"
                :type="liveStramingStatusEnum[item.status].type"
                >{{ liveStramingStatusEnum[item.status].value }}</el-tag
              ></span
            >
          </div>
          <!-- <span class="time">{{ item.orderTime }}</span> -->
          <div class="op" v-if="isTeacher">
            <el-button
              link
              type="primary"
              @click.stop="liveStreamingStartClick(item, index)"
              v-if="item.status == 0"
              >立即开播</el-button
            >
            <el-button
              link
              type="primary"
              v-if="item.status == 0"
              @click="addLiveStreaming(false, item)"
              >修改</el-button
            >
            <el-button link type="danger" @click="deleteLiveStreaming(item)"
              >删除</el-button
            >
          </div>
        </div>
      </div>
      <div class="title" id="courseTask">
        <span>任务</span>
        <span />
      </div>
      <div class="title" id="feedback">
        <span>反馈</span>
        <span
          ><el-button
            type="primary"
            v-if="
              !isTeacher ||
              (courseDetail.userId == userInfo?.userId && isTeacher)
            "
            @click="giveFeedback"
            >发表反馈</el-button
          ></span
        >
      </div>
      <div class="feedback">
        <div class="item" v-for="(item, index) in feedbackList" :key="index">
          <div class="t">
            <div class="avatar">
              <img :src="QNURL + item.avatar" alt="" />
            </div>
            <span class="name">{{ item.nickName }}</span>
          </div>
          <div class="c">{{ item.content }}</div>
          <div class="b">
            <span>{{ item.updateTime }}</span>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="courseFeedbackVisible" title="课程反馈" width="30%">
      <el-form
        ref="ruleFormRef"
        :model="feedbackVal"
        class="demo-ruleForm"
        status-icon
        required
        label-width="80px"
      >
        <el-form-item
          prop="courseIntroduce"
          label="反馈"
          style="margin-top: 20px"
        >
          <el-input
            placeholder="请输入课程反馈"
            type="textarea"
            v-model="feedbackVal.feedback"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="btns">
          <el-button @click="courseFeedbackVisible = false">取消</el-button>
          <el-button type="primary" @click="comfirmHandel">添加</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="addVideoVisible"
      :title="isAddVideo ? '添加视频' : '修改视频'"
      width="30%"
    >
      <el-form
        ref="videoInfoRuleFormRef"
        :model="videoInfo"
        class="demo-ruleForm"
        status-icon
        required
        label-width="80px"
        :rules="rules"
      >
        <el-form-item prop="name" label="视频名称" style="margin-top: 20px">
          <el-input placeholder="请输入视频名称" v-model="videoInfo.name" />
        </el-form-item>
      </el-form>
      <Upload
        v-if="isAddVideo"
        @successUpload="successUpload"
        @videoTime="videoTime"
      />
      <template #footer>
        <div class="btns">
          <el-button @click="addVideoVisible = false">取消</el-button>
          <el-button type="primary" @click="addVieoComfirmHandel"
            >添加</el-button
          >
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="liveStreamingVisible"
      :title="isAddLiveStreaming ? '发起直播' : '修改直播'"
      width="30%"
    >
      <el-form
        ref="liveStreamingRuleFormRef"
        :model="liveStreamingInfo"
        class="demo-ruleForm"
        status-icon
        required
        label-width="100px"
        :rules="liveStreamingRules"
      >
        <el-form-item
          prop="roomName"
          label="直播间名称"
          style="margin-top: 20px"
        >
          <el-input
            placeholder="请输入直播间名称"
            v-model="liveStreamingInfo.roomName"
          />
        </el-form-item>
        <el-form-item
          prop="roomIntroduce"
          label="直播间介绍"
          style="margin-top: 20px"
        >
          <el-input
            placeholder="请输入直播间介绍"
            type="textarea"
            v-model="liveStreamingInfo.roomIntroduce"
          />
        </el-form-item>
        <el-form-item
          prop="orderTime"
          label="直播时间"
          style="margin-top: 20px"
        >
          <el-date-picker
            v-model="liveStreamingInfo.orderTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <el-upload
            class="cover_upload"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="liveStreamingInfo.cover"
              :src="QNURL + liveStreamingInfo.cover"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="btns">
          <el-button @click="addVideoVisible = false">取消</el-button>
          <el-button type="primary" @click="liveStreamingComfirmHandel">{{
            isAddLiveStreaming ? "添加" : "修改"
          }}</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 直播信息展示-->
    <el-dialog v-model="startLiveVisible" title="发起直播" width="30%">
      <div class="live_streaming_dialog">
        <div class="info">
          <div class="live_streaming_content">
            <div class="item">
              <span class="label">推流地址：</span>
              <span class="value">rtmp://192.168.43.253:1973/hls</span>
            </div>
            <div class="item">
              <span class="label">推流码：</span>
              <span class="value">{{
                liveStreamingRoomInfo?.pushStreamingCode
              }}</span>
            </div>
            <div class="tip" @click="helpHandel">
              不知道如何直播？点击查看教程！
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="btns">
          <el-button @click="startLiveVisible = false">取消</el-button>
          <el-button type="primary" @click="nextStep">设置完成</el-button>
        </div>
      </template>
    </el-dialog>
    <RightBottomNav />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Header from "@/components/header/Header.vue";
import { useCourseHooks } from "./hook";
import { QNURL } from "@/config/urlConfig";
import Upload from "./components/upload.vue";
import { Plus } from "@element-plus/icons-vue";
import { liveStramingStatusEnum } from "@/enums/enum";
import { useRouter } from "vue-router";
import RightBottomNav from "@/components/right-bottom-nav/RightBottomNav.vue";

const router = useRouter();

const {
  courseDetail,
  feedbackList,
  feedbackVal,
  videoList,
  courseFeedbackVisible,
  addVideoVisible,
  videoInfoRuleFormRef,
  videoInfo,
  rules,
  courseId,
  liveStreamingVisible,
  liveStreamingInfo,
  liveStreamingRules,
  liveStreamingRuleFormRef,
  liveStreamingList,
  liveStreamingRoomInfo,
  isSelcted,
  startLiveVisible,
  isTeacher,
  isAddVideo,
  userInfo,
  isAddLiveStreaming,
  nextStep,
  videoTime,
  liveStreamingStartClick,
  liveStreamingComfirmHandel,
  liveStreamingClick,
  beforeAvatarUpload,
  addLiveStreaming,
  giveFeedback,
  comfirmHandel,
  addVideo,
  addVieoComfirmHandel,
  successUpload,
  helpHandel,
  cancelUserCourseFun,
  addCourse,
  videoClick,
  deleteVideoFun,
  deleteLiveStreaming
} = useCourseHooks();

let currentTabIndex = ref(0);

const tabList = [
  {
    label: "简介",
    id: "introduce"
  },
  {
    label: "课程",
    id: "course"
  },
  {
    label: "直播",
    id: "liveStreaming"
  },
  {
    label: "任务",
    id: "courseTask"
  },
  {
    label: "反馈",
    id: "feedback"
  }
];

function tabClick(t: any, i: number) {
  currentTabIndex.value = i;

  let dom = document.getElementById(t.id) as any;
  dom.scrollIntoView({ behavior: "smooth", block: "center" });
}

function scheduleType(item: any) {
  const val = Number(((item.studyDuration / item.duration) * 100).toFixed(2));

  if (val < 60) {
    return "danger";
  } else if (val >= 60 && val < 90) {
    return "warning";
  } else {
    return "success";
  }
}
</script>

<style lang="scss" scoped>
.course {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-color);
  position: relative;
  scroll-behavior: smooth;

  .top_tab {
    position: sticky;
    width: 100%;
    background-color: #fff;
    height: 50px;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 1px 1px #e5e5e5;
    z-index: 10;

    span {
      width: 80px;
      cursor: pointer;
    }

    .active {
      font-weight: bold;
      font-size: 20px;
      color: var(--orange-color);
    }
  }

  .container {
    width: 1000px;
    margin: 20px auto;
    padding-bottom: 100px;

    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      height: 50px;
      position: relative;
      padding-left: 10px;

      span {
        &:first-child {
          font-size: 20px;
          font-weight: bold;
        }
      }

      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        width: 5px;
        height: 50%;
        transform: translate(0, -50%);
        background-color: var(--orange-color);
        border-radius: 5px;
      }
    }

    .content {
      width: 100%;
      height: 300px;
      display: flex;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }

      .l,
      .r {
        flex: 1;
        height: 100%;
      }

      .r {
        display: flex;
        flex-direction: column;
        padding: 20px;
        position: relative;

        &_title {
          font-size: 20px;
        }

        .name {
          font-size: 15px;
          color: var(--secondary-color);
          margin-top: 10px;
        }

        .btns {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 20px;
        }
      }
    }

    .tab {
      width: 100%;
      height: 50px;
      line-height: 50px;
      position: relative;
      padding-left: 10px;

      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        width: 5px;
        height: 50%;
        transform: translate(0, -50%);
        background-color: var(--orange-color);
        border-radius: 5px;
      }

      span {
        font-size: 15px;
        margin-right: 10px;
        cursor: pointer;
      }

      .tab_active {
        font-size: 20px;
        font-weight: bold;
        color: var(--orange-color);
      }
    }

    .introduce {
      width: 100%;
      min-height: 300px;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
    }

    .video {
      width: 100%;
      min-height: 300px;
      background-color: #fff;
      padding: 10px 20px;
      border-radius: 10px;

      .item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        // background-color: #ccc;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        display: flex;
        justify-content: space-between;

        .l {
        }
      }
    }

    .liveStreaming {
      @extend .video;
    }

    .feedback {
      display: flex;
      flex-direction: column;
      min-height: 300px;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;

      .item {
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .t,
      .c,
      .b {
        width: 100%;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .t {
        display: flex;
        align-items: center;
        .avatar {
          width: 50px;
          height: 50px;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 20px;
        }

        .name {
          font-size: 15px;
        }
      }

      .c {
        margin: 10px 0;
      }

      .b {
        span {
          color: var(--secondary-color);
          font-size: 13px;
        }
      }
    }
  }
}
.live_streaming_dialog {
  width: 100%;
  height: 100%;
  padding: 20px;

  .live_streaming_content {
    width: 100%;
    height: 100%;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    .item {
      width: 100%;
      // text-align: center;
      margin-bottom: 10px;

      .value {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .tip {
      width: 100%;
      margin-top: 50px;
      font-size: 13px;
      cursor: pointer;
      color: #409eff;
    }
  }
}

.cover_upload {
  // width: 100%;
  border: 1px dashed #409eff;
  &:deep(.avatar-uploader) {
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      // width: 80px;
      // height: 80px;
      transition: var(--el-transition-duration-fast);

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  &:deep(.avatar-uploader) {
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
  }

  &:deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 120px;
    text-align: center;
  }
}
</style>
